<template>

  <div class="about">

    <div style="width: 40%;margin: 0 auto">
      <div>
          <pre style="font-size: 26px;color: #ababab">
            快写一封留给未来的信吧。
          </pre>
      </div>
      <el-form ref="capsule" :model="capsule" label-width="80px" :rules="rule">
        <el-form-item label="信封内容" prop="content">
          <el-input
              type="textarea"
              :rows="2"
              :autosize="{ minRows: 10, maxRows: 20}"
              placeholder="信封内容"
              v-model="capsule.content">
          </el-input>
        </el-form-item>

        <el-form-item label="打开时间" title="系统将在这一天给你发送这封邮件" prop="openTime">
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="capsule.openTime"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input
              type="email"
              v-model="capsule.email">
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="action">
            <a v-on:click="submitForm('capsule')" class="put"><span>Put</span>添加</a>
            <router-link to="/" class="open"><span>Back</span>返回</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script>
import capsuleApi from '@/api/capsule'

export default {
  data() {
    return {
      capsule: {
        content: '',
        openTime: '',
        email: ''
      },
      rule: {
        email: [
          {
            required: true,
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: '输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        content: [
          {required: true, message: '内容不能太短奥', trigger: 'blur', min: 5},
        ],
        openTime: [
          {required: true, message: '请设置打开时间~', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          capsuleApi.addCapsule(this.capsule)
              .then(response => {//添加成功
                    if (response.data.code == 20000) {
                      //提示信息
                      this.$message({
                        type: 'success',
                        message: '创建胶囊成功!'
                      });

                      //添加成功后提示这段话
                      this.$alert('你将在 【' + this.capsule.openTime + "】 收到这封邮件。", '创建胶囊成功!', {
                        confirmButtonText: '确定',
                      })

                      this.capsule.openTime = ''
                      this.capsule.content = ''
                      this.capsule.email = ''
                    }
                    //回到列表页面 路由跳转
                    // this.$router.push({path:'/teacher/table'})
                  }
              )


        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
  },

}
</script>

<style>
.action {
  padding: 0 40px;
}

.action a.put {
  float: left;
}

.action a {
  display: block;
  color: #333;
  text-align: center;
  font-size: 18px;
}

a {
  text-decoration: none;
  color: #2E8BCC;
}

pre:hover {
  transform: scale(1.02);
  color: #99CCFF;
}
</style>